<template>
	<div class="HomePage">
		<div class="topView">
			<ul class="menu_list">
				<li v-for="(item, index) in menuList" :key="index">
					<img :src="item.icon" />
					<p>{{item.text}}</p>
				</li>
			</ul>
		</div>

		<div class="search_box">
			<select>
				<option :value="item.key" v-for="(item,index) in selectList" :key="index">{{item.value}}</option>
			</select>
			<div>
				<img src="../assets/indexSearch.png" />
				<input type="text" placeholder="名称或行业搜索">
				<span>搜索</span>
			</div>
		</div>
    	<div>
			<flexbox class="member_list" v-for="(item, index) in memberList" :key="index">
				<flexbox-item :span="3">
					<img :src="item.img" />
				</flexbox-item>
				<flexbox-item :span="9">
					<flexbox :gutter="0">
						<flexbox-item :span="4">
							<span class="titleName">{{item.name}}</span>
						</flexbox-item>
						<flexbox-item :span="8">
							<span class="location" style="float:right;margin-right:7px;">区域：{{item.address}}</span>
						</flexbox-item>
					</flexbox>
					<flexbox :gutter="0">
						<flexbox-item :span="6">
							<span class="cellLabel">行业：{{item.industry}}</span>
						</flexbox-item>
						<flexbox-item :span="6">
							<span class="cellLabel" style="float:right;margin-right:7px;">距{{item.gps}}km</span>
						</flexbox-item>
					</flexbox>
					<flexbox>
						<flexbox-item :span="12">
							<span class="cellLabel">主营：{{item.business}}</span>
						</flexbox-item>
					</flexbox>
				</flexbox-item>
			</flexbox>
		</div>
	</div>
</template>
<script>
import { Selector, Group, Search, XTable, LoadMore } from "vux";
import { Flexbox, FlexboxItem, Divider } from "vux";

export default {
	name: "HomePage",
	data() {
		return {
			menuList: [
				{
					text: '互联网信息',
					icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg'
				},
				{
					text: '机械·制造',
					icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg'
				},
				{
					text: '教育·培训',
					icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg'
				},
				{
					text: '产品·实业',
					icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg'
				},
				{
					text: '建筑·装修',
					icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg'
				},
				{
					text: '建筑·装修',
					icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg'
				},
				{
					text: '教育·培训',
					icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg'
				},
				{
					text: '产品·实业',
					icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg'
				},
				{
					text: '建筑·装修',
					icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg'
				},
				{
					text: '建筑·装修',
					icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg'
				},
			],
			searchValue: '',
			selectList: [
				{ key: "gd", value: "广东" },
				{ key: "gx", value: "广西" }
			],
			memberList: [
				{
					img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg',
					name: '刘德华',
					address: '龙华',
					industry: '财产险',
					business: '财产保险、企业保险',
					gps: '3.5'
				},{
					img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132765502&di=d68abde323ca96ff1d81e8f82e7424a3&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977d4f1a49ab351f8198718e3a1.jpg',
					name: '刘德华',
					address: '龙华',
					industry: '财产险',
					business: '财产保险、企业保险',
					gps: '3.5'
				}
			]
    };
  },
  methods: {
    getValue(ref) {
      this.$vux.alert.show({
        title: "getFullValue",
        content: this.$refs[ref].getFullValue()
      });
    }
  },
  components: {
    Group,
    Selector,
    Search,
    XTable,
    LoadMore,
    Flexbox,
    FlexboxItem,
    Divider
  }
};
</script>
<style scoped>
	.menu_list {
		text-align: center;
		font-size: 12px;
		padding: 8px 0;
		background: #fff;
	}
	.menu_list li {
		display: inline-block;
		width: 20%;
		margin: 7px 0;
	}
	.menu_list img {
		width: 43px;
		border-radius: 40px;
	}
	.search_box {
		margin-top: 1px;
		background: #fff;
		height: 35px;
		padding-top: 5px;
		text-align: center;
	}
	.search_box select {
		width: 100px;
		height: 27px;
		border-radius: 5px;
		background: #F4F4F4;
		border: none;
		margin-right: 5px;
		color: rgb(139, 139, 139);
	}
	.search_box div {
		display: inline-block;
		position: relative;
	}
	.search_box div img {
		position: absolute;
		width: 15px;
		left: 5px;
		top: 7px;
	}
	.search_box div input {
		display: inline-block;
		border-radius: 20px;
		border: none;
		background: #F4F4F4;
		height: 27px;
		padding-left: 30px;
		color: #BBBBBB;
	}
	.search_box div span {
		font-size: 15px;
		color: #D6A64C;
		margin-left: 5px;
	}
	.member_list {
		width: 96%;
		margin: 7px auto;
		background: #fff;
		border-radius: 5px;
		padding: 7px 10px;
		box-sizing: border-box;
		font-size: 14px;
		line-height: 28px;
	}
	.member_list img {
		width: 100%;
		display: block;
	}
	.member_list .titleName {
		font-weight: 700;
		font-size: 15px;
	}
	.location, .cellLabel {
		color: rgb(145, 145, 145);
		margin-bottom: 3%;
	}
	.location {
		color: rgb(75, 75, 75);
	}
</style>